<template>
  <div>
    <a-row>
      <a-col :span="2"> </a-col>
      <a-col :span="14">
        <div align="center" style="width: 100%">
          <a-descriptions align="center" bordered>
            <a-descriptions-item label="项目名称" :span="1">{{project.p_title}}</a-descriptions-item>
            <a-descriptions-item label="类型">{{project.p_class}}</a-descriptions-item>
            <a-descriptions-item label="信誉成度">{{project.p_reputation}}</a-descriptions-item>
            <a-descriptions-item label="项目时间">{{project.p_start_time}}至{{project.p_end_time}}</a-descriptions-item>
            <a-descriptions-item label="报名截至时间">{{project.p_join_time}}</a-descriptions-item>

            <a-descriptions-item label="预期收益">${{project.p_expect_money}}</a-descriptions-item>
            <a-descriptions-item label="获得融资">${{project.p_curr_money}}</a-descriptions-item>
            <a-descriptions-item label="信誉要求">{{project.p_demand}}</a-descriptions-item>
            <a-descriptions-item label="组队状态">
              <a-badge status="processing"  />
              {{project.p_current_num}}/{{project.p_people_num}}
            </a-descriptions-item>
            <a-descriptions-item label="项目简介">
              {{project.p_info}}
            </a-descriptions-item>
          </a-descriptions>
          <router-link :to="{ name: 'news' }" tag="li">
            <a-button type="dashed">行业周报</a-button>
          </router-link>

          <a-button type="dashed">加入我们</a-button>
        </div>
      </a-col>
      <a-col :span="6">
        <a-image :width="500" :height="200" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jinse.com%2F1084134_image30.png&refer=http%3A%2F%2Fimg.jinse.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640095819&t=51cd59847fdcc978e4bcaf95ab13d7be" />
      </a-col>
      <a-col :span="2"> </a-col>
    </a-row>
    <a-row>
      <a-col :span="2"> </a-col>
      <a-col :span="15">
        <a-list class="comment-list" :header="`${Comments.length} 评论`" item-layout="horizontal" :data-source="Comments">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-comment :author="item.u_name" :avatar="item.u_url">
                <template #actions>
                  <span @click="ReplyVisible(item)">回复</span>
                </template>
                <template #author>
                  <a>{{ item.u_name }}</a>
                </template>
                <template #avatar>
                  <a-avatar :src="item.u_url" alt=" item.u_name " />
                </template>
                <template #content>
                  <p>
                    {{ item.f_c_text }}
                  </p>
                </template>
                <template #datetime>
                  <a-tooltip :title="moment(item.f_c_time).format('YYYY-MM-DD HH:mm:ss')">
                    <span>{{ moment(item.f_c_time).fromNow() }}</span>
                  </a-tooltip>
                </template>
                <a-comment v-for="chil in item.children" :key="chil.f_c_sub_id">
                  <template #actions>
                    <span @click="ReplyVisible(item, chil.u_name)">回复</span>
                  </template>
                  <template #author>
                    <a>{{ chil.u_name }}</a>
                  </template>
                  <template #avatar>
                    <a-avatar :src="chil.u_url" alt="chil.u_name" />
                  </template>
                  <template #content>
                    <p>
                      {{ chil.f_c_text }}
                    </p>
                  </template>
                  <template #datetime>
                    <a-tooltip :title="
                        moment(chil.f_c_time).format('YYYY-MM-DD HH:mm:ss')
                      ">
                      <span>{{ moment(chil.f_c_time).fromNow() }}</span>
                    </a-tooltip>
                  </template>
                </a-comment>
                <a-comment v-if="item.visible">
                  <template #avatar>
                    <a-avatar :src="user.avatar" :alt="user.userName" />
                  </template>
                  <template #content>
                    <a-form-item :wrapper-col="{ span: 24 }">
                      <a-textarea :rows="4" v-model:value="addReplyParam.f_c_text" />
                    </a-form-item>
                    <a-form-item>
                      <a-button html-type="submit" :loading="submitting1" type="primary" @click="addReply(item.f_c_host_id)">
                        提交
                      </a-button>
                    </a-form-item>
                  </template>
                </a-comment>
              </a-comment>
            </a-list-item>
          </template>
        </a-list>
        <a-comment>
          <template #avatar>
            <a-avatar :src="user.avatar" :alt="user.userName" />
          </template>
          <template #content>
            <a-form-item :wrapper-col="{ span: 15 }">
              <a-textarea :rows="8" v-model:value="addCommentParam.f_c_text" />
            </a-form-item>
            <a-form-item>
              <a-button html-type="submit" :loading="submitting" type="primary" @click="addComment">
                提交
              </a-button>
            </a-form-item>
          </template>
        </a-comment>
      </a-col>
      <a-col :span="5">
        <div v-for="item in pageg" :key="item.picId">
          <a-card style="width: 240px">
            <template #cover>
              <img :alt="example" :src="item.url" />
            </template>
            <a-card-meta :title="item.title">
              <template #description>{{ item.describe }}</template>
            </a-card-meta>
          </a-card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script setup>
  import { message } from "ant-design-vue";
  import { get, post, tip } from "@/common"; //基础
  import moment from "moment";
  import {
    LikeFilled,
    LikeOutlined,
    DislikeFilled,
    DislikeOutlined,
  } from "@ant-design/icons-vue";
  import { defineComponent, ref, reactive } from "vue";
  const data = [
    {
      title: "Ant Design Title 1",
    },
    {
      title: "Ant Design Title 2",
    },
    {
      title: "Ant Design Title 3",
    },
    {
      title: "Ant Design Title 4",
    },
  ];
//传数据用ref，接受数据用reactive
  // 当前用户信息
  const user = ref({
    userId: "",
    userName: "",
    avater: "",
  });
  
  const projectinfo = reactive({
    p_id: "",
    p_url: "",
    p_title: "",
    p_maeket_info: "",
    p_technical_info: "",
    p_img_info: "",
    p_start_time: "",
    p_end_time: "",
    p_people_num: "",
    p_join_time: "",
    p_info: "",
    p_curr_money: "",
    p_expect_money: "",
    p_current_num: "",
    p_demanmd: "",
    p_class: "",
    p_reputation: "",
  })
 
 
    


  const project = ref({
    p_id: "",
    p_url: "",
    p_title: "",
    p_maeket_info: "",
    p_technical_info: "",
    p_img_info: "",
    p_start_time: "",
    p_end_time: "",
    p_people_num: "",
    p_join_time: "",
    p_info: "",
    p_curr_money: "",
    p_expect_money: "",
    p_current_num: "",
    p_demanmd: "",
    p_class: "",
    p_reputation: "",
  })

  const getCurrnetUser = () => {
    get("/security/home/currentUser").then((res) => {
      user.value = res.data;
    });
  };
  getCurrnetUser();
//获取数据
  const getprojectinfo = () => {
    projectinfo.p_id =sessionStorage.getItem("p_id");
    console.log(projectinfo);//在页面打印出数据
    post("/project/info", projectinfo).then((res) => {
      project.value = res.data;
    });
  };
  getprojectinfo();

  // 查看评论
  const Comments = ref([]);
  const getComment = () => {
    post("/forum/freeChat/getHostChat", { p_id: 1 }).then((res) => {
      Comments.value = res.data;
      console.log(Comments.value);
    });
  };
  getComment();

  //增加评论
  const submitting = ref(false);
  const addCommentParam = reactive({
    u_id: "",
    p_id: 1,
    f_c_text: "",
  });
  const addComment = () => {
    if (!addCommentParam.f_c_text) {
      message.error("评论不能为空！");
      return;
    }
    addCommentParam.u_id = user.value.userId;
    submitting.value = true;
    post("/forum/freeChat/addHostChat", addCommentParam).then((res) => {
      message.success(res.message);
      submitting.value = false;
      addCommentParam.f_c_text = "";
      getComment();
    });
  };

  //增加回复
  const ReplyName = ref();
  const ReplyVisible = (item, name) => {
    item.visible = true;
    ReplyName.value = name;
    if (name != null) {
      addReplyParam.f_c_text = "@" + name + ": ";
    }
  };
  const submitting1 = ref(false);
  const addReplyParam = reactive({
    u_id: "",
    p_id: 1,
    f_c_host_id: undefined,
    f_c_text: "",
  });
  const addReply = (hostId) => {
    if (!addReplyParam.f_c_text) {
      message.error("评论不能为空！");
      return;
    }
    addReplyParam.u_id = user.value.userId;
    addReplyParam.f_c_host_id = hostId;
    submitting1.value = true;
    post("/forum/freeChat/addSubChat", addReplyParam).then((res) => {
      message.success(res.message);
      submitting1.value = false;
      addReplyParam.f_c_text = "";
      getComment();
    });
  };

  //
  const visible = ref(false);
  const likes = ref(0);
  const dislikes = ref(0);
  const action = ref();

  const showModal = () => {
    visible.value = true;
  };

  const handleOk = (e) => {
    console.log(e);
    visible.value = false;
  };
  const like = () => {
    likes.value = 1;
    dislikes.value = 0;
    action.value = "liked";
  };

  const dislike = () => {
    likes.value = 0;
    dislikes.value = 1;
    action.value = "disliked";
  };

</script>
<style scoped>
  #components-layout-demo-basic .code-box-demo {
    text-align: center;
  }
</style>